<template>
    <div class="dialogue">
        <div class="header-btns">
            <ul class="header-btns-list clearfix">
                <li class="header-item-btn fl" @click="sendDialog">
                    <i class="icon"></i>
                    <span>传送对话</span>
                </li>
                <li class="header-item-btn fl" @click="resDialog">
                    <i class="icon"></i>
                    <span>响应传送</span>
                </li>
                <li class="header-item-btn fl" @click="inviteVisitors">
                    <i class="icon"></i>
                    <span>邀请访客</span>
                </li>
                <li class="header-item-btn fl" @click="launchDialog">
                    <i class="icon"></i>
                    <span>主动对话</span>
                </li>
                <li class="header-item-btn fl" @click="receiveDialog">
                    <i class="icon"></i>
                    <span>接受对话</span>
                </li>
                <li class="header-item-btn fl" @click="endDialog">
                    <i class="icon"></i>
                    <span>结束对话</span>
                </li>
                <li class="header-item-btn fl" @click="monitorServer">
                    <i class="icon"></i>
                    <span>监控客服</span>
                </li>
                <li class="header-item-btn fl" @click="cancelMonitor">
                    <i class="icon"></i>
                    <span>取消监控</span>
                </li>
                <li class="header-item-btn fl" @click="showQueue">
                    <i class="icon"></i>
                    <span>显示队列</span>
                </li>
                <li class="header-item-btn fl" >
                    <Dropdown trigger="click" @on-click="changeStatus">
                        <DropdownMenu slot="list">
                            <DropdownItem name="0" :selected="onlineStatus[0]">
                                <Icon class="fl" type="happy-outline" :size="18"></Icon>在线
                            </DropdownItem>
                            <DropdownItem name="2" :selected="onlineStatus[2]">
                                <Icon class="fl" type="leaf" :size="18"></Icon>离开
                            </DropdownItem>
                            <DropdownItem name="3" :selected="onlineStatus[3]">
                                <Icon class="fl" type="ios-minus" :size="18"></Icon>忙碌
                            </DropdownItem>
                            <DropdownItem name="1" :selected="onlineStatus[1]">
                                <Icon class="fl" type="cube" :size="18"></Icon>隐身
                            </DropdownItem>
                        </DropdownMenu>
                        <a href="javascript:void(0)" class="drop-btn">
                            <i class="icon"></i>
                            {{onlineStatusTxt[onlineStatusIndex]}}<Icon type="arrow-down-b"></Icon>
                        </a>
                    </Dropdown>
                </li>
            </ul>
        </div>
        <top-side :style="{height: layout.top.height+'px'}"></top-side>
        <div class="bottom flex-column" :style="{height: layout.bottom.height+'px'}">
            <div class="space-bar-top-bottom spacebar" @mousedown.stop.prevent="handleDown('bottomVertical',$event)">
                <div class="inner-bar">
                    <span class="rect"></span>
                    <span class="rect"></span>
                    <span class="rect"></span>
                    <span class="rect"></span>
                    <span class="rect"></span>
                    <span class="rect"></span>
                    <span class="rect"></span>
                    <span class="rect"></span>
                    <span class="rect"></span>
                </div>
            </div>
            <div class="flex-row flex-item">
                <div class="leftside" :style="{width: layout.bleft.width+'px'}">
                    <left-side></left-side>
                </div>
                <div class="rightside flex-item" :style="{width: layout.bright.width+'px'}">
                    <div class="space-bar-left-right spacebar" @mousedown.stop.prevent="handleDown('leftRightHorizon',$event)">
                        <div class="inner-bar">
                            <span class="rect"></span>
                            <span class="rect"></span>
                            <span class="rect"></span>
                            <span class="rect"></span>
                            <span class="rect"></span>
                            <span class="rect"></span>
                            <span class="rect"></span>
                            <span class="rect"></span>
                            <span class="rect"></span>
                        </div>
                    </div>
                    <div class="chat">
                        <div class="chat-list" :style="{height: layout.rtopStyl.height+'px'}">
                            <div class="chat-resource flex-row">
                                <p>搜索引擎<span class="re-content">发顺丰三</span></p>
                                <p>关键词<span class="re-content">公司的风格大方</span></p>
                                <p>来源<span class="re-content">公司的分公司地方</span></p>
                                <p class="flex-item chat-page">对话页面<a class="re-content" href="javascript:;" target="_blank">https://www.onlineservice-hk.com/k800/chatClient/chatbox.jsp?companyID=210&s=1</a></p>
                            </div>
                            <div class="chat-box">
                                <ChatList></ChatList>
                            </div>
                            <div class="chat-watching">
                                <input type="text" readonly >
                            </div>
                        </div>
                        <div class="chat-input flex-column" :style="{ height:layout.rbottomStyl.height+'px'}">
                            <div class="space-bar-top-bottom spacebar" @mousedown.stop.prevent="handleDown('rightVertical',$event)">
                                <div class="inner-bar">
                                    <span class="rect"></span>
                                    <span class="rect"></span>
                                    <span class="rect"></span>
                                    <span class="rect"></span>
                                    <span class="rect"></span>
                                    <span class="rect"></span>
                                    <span class="rect"></span>
                                    <span class="rect"></span>
                                    <span class="rect"></span>
                                </div>
                            </div>
                            <InputBox></InputBox>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        
    </div>
</template>
<script>
import LeftSide from './leftSide';
import TopSide from './topSide.vue';
import RightSide from './rightSide.vue';
import ChatList from '@/pages/index/comp/chatList'
import InputBox from '@/pages/index/comp/inputBox'
export default {
    components: { LeftSide, TopSide, RightSide, ChatList, InputBox},
    data () {
        return {
            onlineStatus: [false,true,false,false],
            onlineStatusTxt: ["在线", "隐身", "离开", "忙碌"],
            onlineStatusIndex: 1,
            resize: {
                direction: null,
                mouseX: 0,
                mouseY: 0,
                lastMouseX: 0,
                lastMouseY: 0,
                mouseOffX: 0,
                mouseOffY: 0
            },
            layout: {
                clientWidth: null,
                clientHeight: null,
                top: {
                    height: 200,
                    minHeight:28
                },
                bottom: {
                    height: null,
                    minHeight:230
                },
                bleft: {
                    width: 656,
                    minWidth: null,
                    height: null
                },
                bright: {
                    width: null,
                    minWidth: null,
                    height: null
                },  
                rtopStyl: {
                    height: null,
                    minHeight: 58
                },
                rbottomStyl: {
                    height: 165,
                    minHeight: 74
                }
            }
        }
    },
    methods: {
        sendDialog () {//传送对话
            this.$Message.info('传送对话');
        },
        resDialog () {//响应传送
            this.$Message.info('响应传送');
        },
        inviteVisitors () {//邀请访客
            this.$Message.info('邀请访客');
        },
        launchDialog () {//主动对话
            this.$Message.info('主动对话');
        },
        receiveDialog () {//接受对话
            this.$Message.info('接受对话');
        },
        endDialog () {//结束对话
            this.$Message.info('结束对话');
        },
        monitorServer () {//监控客服
            this.$Message.info('监控客服');
        },
        cancelMonitor () {//取消监控
            this.$Message.info('取消监控');
        },
        showQueue () {//显示队列
            this.$Message.info('显示队列');
        },
        changeStatus (type) {//更改在线状态
            this.onlineStatusIndex = parseInt(type);
            this.onlineStatus = this.onlineStatus.map( (x,idx) => {
                if(idx != this.onlineStatusIndex){
                    x = false
                }
            });
            this.onlineStatus[this.onlineStatusIndex] = true;
            /**
            this.$socket.emit('onlineStatus',{
                "c_id": "80010",
                "c_t": "0",
                "s_id": "10",
                "is_en": "0",
                "w_k": "e12906e0-831e-11e8-a050-e342921b4d56",//唯一id
                "crc": "qweasd",
                "bd":{
                    "tk": "753951466321",
                    "c_s_id": "112233445566",
                    "co_id": "12345678",
                "o_s": type//切换在线状态
                }
            }, res => {
                if(res && res.bd.e_c == "0"){//成功

                }else{
                    this.$Message.fail('系统异常');
                }
            }); */
        },
        setLayout () {
            //设置会话页面
            let box = document.getElementsByClassName("dialogue")[0];
            let boxHeight = box.clientHeight;
            let clientWidth = document.documentElement.clientWidth;
            let clientHeight = document.documentElement.clientHeight;
            let bottomLeftWidth = 656;
            let topHeight = 228;
            let headerHeight = 100;
            let rightHeight = 615;
            this.layout.clientWidth = clientWidth;
            this.layout.clientHeight = clientHeight;
            box.getElementsByClassName("bottom")[0].style.height = boxHeight - 73 - 200 - 4 + "px";
            this.layout.bright.width = clientWidth - bottomLeftWidth;
            this.layout.bottom.height = clientHeight - topHeight - headerHeight;
            this.layout.rtopStyl.height = rightHeight - this.layout.rbottomStyl.height;
        },
        handleMove (e) {
            if(this.resize.direction){
                this.resize.lastMouseX = this.resize.mouseX;//每次移动的时候，前一个位置就成了last
                this.resize.lastMouseY = this.resize.mouseY;//交替
                //最新鼠标位置
                this.resize.mouseX = e.pageX || e.clientX + document.documentElement.scrollLeft;
                this.resize.mouseY = e.pageY || e.clientY + document.documentElement.scrollTop;
                //实际移动距离
                let diffX = this.resize.mouseX - this.resize.lastMouseX;
                let diffY = this.resize.mouseY - this.resize.lastMouseY;

                if(this.resize.direction == "bottomVertical"){
                    if(this.layout.top.height < this.layout.top.minHeight){
                        if( diffY <= 0){
                            return;
                        }
                    }

                    if(this.layout.bottom.height < this.layout.bottom.minHeight){
                        if(diffY >= 0){
                            return;
                        }
                    }
                    window.requestAnimationFrame(() => {
                        this.layout.bottom.height -= diffY;
                        this.layout.top.height += diffY;
                    });

                }else if(this.resize.direction == "leftRightHorizon"){
                    //一定要保证动态改变的元素要有初始宽度
                    window.requestAnimationFrame(() => {
                        this.layout.bleft.width += diffX;
                        this.layout.bright.width -= diffX;
                    });
                }else if(this.resize.direction == "rightVertical") {
                    if(this.layout.rtopStyl.height < this.layout.rtopStyl.minHeight){
                        if(diffY <= 0){
                            return;
                        }
                    }
                    if(this.layout.rbottomStyl.height < this.layout.rbottomStyl.minHeight){
                        if(diffY >= 0){
                            return;
                        }
                    }
                    window.requestAnimationFrame(() => {
                        this.layout.rbottomStyl.height -= diffY;
                        this.layout.rtopStyl.height += diffY;
                    });
                }

            }
        },
        handleDown (direction, ev) {
            this.resize.direction = direction;
            if (ev.stopPropagation) ev.stopPropagation()
            if (ev.preventDefault) ev.preventDefault()
        },
        deselect (e) {
            this.resize.direction = null;
            this.resize.mouseX = e.pageX || e.clientX + document.documentElement.scrollLeft
            this.resize.mouseY = e.pageY || e.clientY + document.documentElement.scrollTop
            this.resize.lastMouseX = this.resize.mouseX
            this.resize.lastMouseY = this.resize.mouseY
        },
        handleUp () {
            this.resize = {
                direction: null,
                mouseX: 0,
                mouseY: 0,
            }
        }

    },
    mounted () {
        this.setLayout();
        document.documentElement.addEventListener("mousemove", this.handleMove, true);
        document.documentElement.addEventListener("mousedown", this.deselect, true);
        document.documentElement.addEventListener("mouseup", this.handleUp, true);
    },
    beforeDestroy () {
        document.documentElement.removeEventListener("mousemove", this.handleMove, true);
        document.documentElement.removeEventListener("mousedown", this.deselect, true);
        document.documentElement.removeEventListener("mouseup", this.handleUp, true);
    }

}
</script>
<style lang="scss" scoped>
@import '@/scss/header.scss';
.dialogue {
    width: 100%;
    height: 100%;

    .bottom {
        // min-height: 500px;
        
        .spacebar {
            position: relative;
            border: solid 1px $c_12;
            background-color: $c_1;

            .bar {
                position: absolute;
            }
        }
        .space-bar-top-bottom {
            cursor: row-resize;
            height: 4px;
            width: 100%;
        }
        .space-bar-left-right {
            cursor: col-resize;
            width: 4px;
            height: 100%;
            position: absolute;
        }

        .leftside {
            width: 650px;
            height: 100%;
        }

        .rightside {
            position: relative;
            box-sizing: border-box;
            height: 100%;
            
            .chat {
                position: relative;
                width: 100%;
                height: 100%;
                padding-bottom: 165px;
                margin-left: 4px;
            }
            .chat-list {
                height: 100%;
                color: $c_3;
                // position: relative;
                // padding-top: 28px;

                .chat-resource {
                    width: 100%;
                    height: 28px;
                    background-color: $c_14;
                    // position: absolute;
                    // top: 0;
                    // left: 0;

                    p {
                        height: 100%;
                        line-height: 28px;
                        margin-left: 6px;

                        .re-content {
                            padding-left: 6px;
                            color: $c_17;
                            display: inline-block;
                            min-width: 100px;
                            text-decoration: underline;
                        }
                        &.chat-page {
                            cursor: pointer;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                }

                .chat-box {
                    padding: 10px;
                    height: 100%;
                    overflow-y: auto;
                    overflow-x: hidden;
                }
            }
            .chat-input {
                // position: absolute;
                // bottom: 0;
                height: 165px;
                width: 100%;

                .spacebar {
                    position: relative;
                    border: solid 1px $c_12;
                    background-color: $c_1;

                    .bar {
                        position: absolute;
                    }
                }

                .space-bar-top-bottom {
                    cursor: row-resize;
                    height: 4px;
                    width: 100%;
                }
            }
        }

    }  
}
</style>

